<template>
	<view class="material-file b-f" @click="onSelected">
		<view class="-image">
			<image mode="widthFix" class="dis-block image" :src="image"></image>
		</view>
		<view class="-name twoline-hide">{{material.name}}</view>
		<view class="-selected" :class="{'active': selected}">
			<image mode="heightFix" src="/static/selected.png"></image>
		</view>
	</view>
</template>

<script>
	import File from './file.js'
	export default {
		name: 'material-file',
		mixins: [File],
		props: {
			material: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				selected: false,
			}
		},
		computed: {
			image: function() {
				return this.getFileImage(this.material);
			},
		},
		methods: {
			onSelected: function() {
				this.selected = !this.selected;
				if (this.material.type === 1) {
					this.$Bus.$emit("material:ops", {
						type: 'open',
						file: this.material
					});
				} else {
					this.$set(this.material, 'selected', this.selected);
					this.$Bus.$emit("material:ops", {
						type: 'select',
						file: this.material
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.material-file {
		width: 220rpx;
		padding: 20rpx;
		margin: 0 10rpx 10rpx 0;
		position: relative;
		border: 1px solid #eee;
		border-radius: 2rpx;
		transition: 200ms ease-out;

		.-image {
			width: 180rpx;
			height: auto;
			margin: 0 auto;
			display: flex;
		}

		.-name {
			overflow: hidden;
			height: 65rpx;
		}

		.-selected {
			left: 0;
			bottom: 0;
			height: 60rpx;
			width: 100%;
			opacity: 0.3;
			position: absolute;
			display: none;
			justify-content: flex-end;

			image {
				max-width: 100%;
				height: 60rpx;
				display: block;
			}

			&.active {
				display: flex;
				opacity: 1;
			}
		}
	}
</style>
